﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery点击特效鼠标点击文字上浮(原创)-jq22.com</title>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
html,body {
	overflow:hidden;
}
h3 {
	padding-top:50px;
	text-align:center;
}
h3 span {
	display:inline-block;
	animation:demo 5s linear infinite;
	margin:0 5px;
	font-weight:bold;
	font-size:32px;
}
@keyframes demo {
	0% {
	opacity:1;
	transform:translateY(0px);
}
25% {
	opacity:0.3;
	transform:translateY(-20px);
}
50% {
	opacity:0.7;
	transform:translateY(0px);
}
75% {
	opacity:0.3;
	transform:translateY(20px);
}
100% {
	opacity:1;
	transform:translateY(0px);
}
}/*以上代码皆可删除*/</style>
</head>
<body>
<h3><span style="color:#e74c3c;animation-delay: 0s;">鼠</span><span style="color:#27ae60;animation-delay: 1s;">标</span><span style="color:#3498db;animation-delay: 2s;">点</span><span style="color:#8e44ad;animation-delay: 3s;">击,</span><span style="color:#9980FA;animation-delay: 4s;">文</span>
    <span style="color:#e74c3c;animation-delay: 5s;">字</span><span style="color:#3498db;animation-delay: 6s;">上</span><span style="color:#9980FA;animation-delay: 7s;">浮</span></h3>

<script>
/*
	flyFont(textArr[可选参数],colorArr[可选参数],fontSize[可选参数],duration[可选参数],flyHeight[可选参数]);
	textArr(参数一):数组类型,设置上浮内容
	colorArr(参数二):数组类型,设置上浮内容的颜色
	fontSize(参数三):数值(单位/px),设置上浮的字体大小,默认18px
        duration(参数四):数值(单位/毫秒),设置上浮的时长,默认1000毫秒
	flyHeight(参数五):数值(单位/px),设置上浮的高度,默认200px
	以上参数都可不填写,选择默认:flyFont();
				
	填写参数位置必须一一对应,例:
	flyFont(['H','e','l','l','o'],['red','green','blue'],"10px",2000,300);
	或
	flyFont(['H','e','l','l','o'],['red','green','blue'],'30px');				
*/
//鼠标点击文字上浮特效
function flyFont(textArr, colorArr, fontSize, duration, flyHeight) {
    textArr = textArr || ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善'];
    colorArr = colorArr || ['#e74c3c', '#27ae60', '#3498db', '#8e44ad', '#9980FA'];
    fontSize = fontSize || "18px";
    duration = duration || 1000;
    flyHeight = flyHeight || 200;
    $("html,body").click(function(event) {
        event = event || window.event;
        let oSpan = $('<span></span>');
        oSpan.css({
            position: 'absolute',
            zIndex: 99999,
            fontWeight: 'bold',
            fontSize: fontSize,
            userSelect: 'none',
            color: colorArr[0],
            left: event.pageX + 'px',
            top: event.pageY + 'px'
        })
        oSpan.text(textArr[0]);
        textArr.push(textArr.shift());
        colorArr.push(colorArr.shift());
        $("body").append(oSpan)
        oSpan.animate({
            top: oSpan.offset().top - flyHeight,
            opacity: 0,
        }, duration, 'linear', function() {
            $(this).remove();
        })
    })
}

flyFont();
</script>

</body>
</html>
